<template>
  <div class="app-table">
    <el-table :data="pageData.items"
      v-loading="loading"
      element-loading-text="拼命加载中"
      ref="tb"
      stripe
      @selection-change="handleSelectionChange"
      @row-click="handleRowClick"
      :max-height="430"
      :header-cell-style="{backgroundColor:'#399FFB', color: '#fff'}"
      :cell-class-name="tableCellClassName">
      <el-table-column type="selection" width="55" v-if="!pageData.isSelectColmunHide"></el-table-column>
      <el-table-column v-for="(item, index) in tableColumns"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        :formatter="item.formatter"
        :filters="item.filters"
        :class-name="item.className"
        :show-overflow-tooltip="tips">
      </el-table-column>
      <el-table-column label="操作"
        fixed="right"
        width="200"
        v-if="pageData.isRole"
        align="center">
        <template slot-scope="scope">
          <el-button size="mini"
            type="success"
            class="miniStyle"
            @click.stop="jurisdiction(scope.$index, pageData.items)">权限配置</el-button>
        </template>
      </el-table-column>
      <el-table-column label="办案时效"
        fixed="right"
        width="200"
        v-if="pageData.isExpire"
        align="center">
        <template slot-scope="scope">
          <el-progress v-if="scope.row.alertLight < 50" :text-inside="true" :stroke-width="16" :percentage="scope.row.alertLight === null ? 0 : scope.row.alertLight" status="success"></el-progress>
          <el-progress v-if="scope.row.alertLight >= 50 && scope.row.alertLight < 80" :stroke-width="16" :text-inside="true" :percentage="scope.row.alertLight" status="warning"></el-progress>
          <el-progress v-if="scope.row.alertLight >= 80" :color="customColor" :text-inside="true" :stroke-width="16" :percentage="scope.row.alertLight > 100 ? 100 : scope.row.alertLight" status="exception"></el-progress>
        </template>
      </el-table-column>
      <el-table-column label="操作"
        fixed="right"
        width="200"
        v-if="pageData.isHandleInline"
        align="center">
        <template slot-scope="scope">
          <el-button size="mini"
            type="success"
            class="miniStyle"
            @click.stop="inlineHandleSelect(scope.$index, pageData.items)">{{pageData.operatorName}}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size="!pageData.limit ? 10 : pageData.limit"
      layout="total, prev, pager, next, jumper"
      :total="pageData.total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  props: {
    tableColumns: {
      type: Array
    },
    btnData: {
      type: Array
    },
    pageData: {
      type: Object,
      default: function () {
        return {
          limit: 10,
          offset: 0,
          items: []
        }
      }
    },
    tips: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      currentPage: 1,
      tableHeight: undefined,
      name: '',
      loading: false,
      isShow: true,
      isCheckFlowHandleCol: false,
      customColor: 'red'
    }
  },
  mounted () {
    this.name = this.$route.name
  },
  methods: {
    tableCellClassName ({row, column, rowIndex, columnIndex}) {
      if (columnIndex === 4 && row.isCriminalTendency === '1') {
        return 'red-row'
      } else if (columnIndex === 5 && row.isImportantEvent === '1') {
        return 'violet-row'
      } else if (columnIndex === 6 && row.isOverdue === '1') {
        return 'yellow-row'
      } else if (columnIndex === 6 && row.evaluationOpinion !== '' && row.evaluationOpinion) {
        return 'green-row'
      } else if (columnIndex === 6 && row.waterSignStatus === 0) {
        return 'warning-row'
      } else if (columnIndex === 6 && row.waterSignStatus === 1) {
        return 'green-row'
      } else if (columnIndex === 6 && row.waterSignStatus === null) {
        return 'danger-row'
      } else if (columnIndex === 5 && row.dangerLevel === '01') {
        return 'danger-row'
      } else if (columnIndex === 5 && row.dangerLevel === '02') {
        return 'warning-row'
      } else if (columnIndex === 5 && row.dangerLevel !== '02' && row.dangerLevel !== '01') {
        return 'primary-row'
      }
      return ''
    },
    timestampToTime: function (row, column) {
      var date = new Date(row.cjsj) // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + '-'
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var D = date.getDate() + ' '
      var h = date.getHours() + ':'
      var m = date.getMinutes() + ':'
      var s = date.getSeconds()
      return Y + M + D + h + m + s
    },
    handleSelectionChange (rows) { // 复选框事件
      this.$emit('handleCheckedRows', rows)
    },
    jurisdiction (index, data) { // 配置权限按钮
      let checkData = {}
      let arrData = [data[index]]
      checkData.btnType = 'get'
      checkData.dialogTitle = '配置' + this.name
      checkData.rows = arrData
      checkData.url = '/modules'
      checkData.showOnly = true
      this.$emit('givePrimise', checkData)
    },
    inlineHandleSelect (index, data) {
      let checkData = {}
      let arrData = [data[index]]
      checkData.rows = arrData
      checkData.url = '/modules'
      checkData.showOnly = true
      this.$emit('inlineHandleSelect', checkData)
    },
    releaseTest (index, data) {
      let checkData = {}
      let arrData = [data[index]]
      checkData.btnType = 'get'
      checkData.dialogTitle = '发布考试'
      checkData.rows = arrData
      checkData.url = '/modules'
      checkData.showOnly = true
      this.$emit('releaseTest', checkData)
    },
    handleRowClick (rows) { // 单行点击事件
      this.isShow = !this.isShow
      let checkData = {}
      let arrData = [rows]
      checkData.btnType = 'get'
      checkData.dialogTitle = '查看' + this.name
      checkData.rows = arrData
      checkData.url = '/modules'
      checkData.showOnly = true
      this.$emit('checkSingleRow', checkData)
      this.$refs.tb.clearSelection()
      this.$refs.tb.toggleRowSelection(rows)
    },
    handleCurrentChange (val) { // 点击页码事件
      this.$emit('currentChange', val)
      this.loading = true
    },
    checkSingle (index, data) {
      let checkData = {}
      let arrData = [data[index]]
      checkData.btnType = 'get'
      checkData.dialogTitle = '查看' + this.name
      checkData.rows = arrData
      checkData.url = '/modules'
      checkData.showOnly = true
      this.$emit('checkSingleRow', checkData)
    },
    changeSingle (index, data) {
      let checkData = {}
      let arrData = [data[index]]
      checkData.btnType = 'put'
      checkData.dialogTitle = '修改' + this.name
      checkData.rows = arrData
      checkData.url = '/modules'
      checkData.showOnly = false
      checkData.showPart = true
      this.$emit('changeSingleRow', checkData)
    },
    deleSingle (index, data) {
      let checkData = {}
      let arrData = [data[index]]
      checkData.btnType = 'delete'
      checkData.dialogTitle = '删除' + this.name
      checkData.rows = arrData
      checkData.url = '/modules'
      checkData.showOnly = false
      this.$emit('deleSingleRow', checkData)
    },
    checkPrimise (data) {
      if (data) {
        for (let i = 0; i < data.length; i++) {
          const element = data[i]
          if (element.btnType === 'manage') {
            this.isCheckFlowHandleCol = true
          } else {
            continue
          }
        }
      }
    }
  },
  computed: {},
  watch: {
    pageData: {
      handler: function (newValue, oldValue) {
        if (newValue.offset === 0) {
          this.currentPage = 1
        }
        this.loading = false
      },
      deep: true,
      immediate: true
    },
    '$store.state.btnData': {
      handler: function (data) {
        this.checkPrimise(data)
      },
      deep: true
    }
  }
}
</script>
<style scoped>
.el-table {
  margin-bottom: 20px;
}
.app-table >>> .el-table th>.cell {
  white-space: nowrap;
  font-size: 14px;
  font-family: '微软雅黑'
}
.app-table >>> .el-table__body-wrapper::-webkit-scrollbar {
  width: 5px;
  height: 10px;
}
.app-table >>> .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: rgba(144,147,153,.3);
  border-radius: 3px;
}
.app-table >>> .el-table__fixed-right-patch {
  width: 0px!important;
}
.app-table >>> .el-table td.gutter,.app-table >>> .el-table th.gutter{
 position: relative;
 top: -1px
}
.el-pagination {margin-bottom: 15px}
.el-table >>> .red-row div{
  background:#ff0000;
  color: #fff
}
.el-table >>> .violet-row div{
  background:#ff6666;
  color: #fff
}
.el-table >>> .yellow-row div {
  background:#ff9999;
  color: #fff
}
.el-table >>> .green-row div {
  color: yellowgreen
}

.el-table >>> .warning-row div {
  color: #CFB53B
}
.el-table >>> .danger-row div {
  color: red
}
.el-table >>> .primary-row div {
  color: rgb(64, 158, 255)
}
  .miniStyle{
    padding: 6px 10px;
  }
</style>
